<template>
    <div style="display: flex; width: 100%; height: 40px">
        <el-form ref="form" :model="fromValue" class="form_list">
            <div class="item" v-for="item in formConfig" :key="item.name">
                <el-form-item :prop="item.name" label="">
                    <el-input v-if="item.type === 'input'" :placeholder="item.placeholder" v-model="fromValue[item.name]"></el-input>
                    <el-cascader
                        v-if="item.type === 'cascader'"
                        :placeholder="item.placeholder"
                        :options="item.options"
                        :show-all-levels="false"
                        :props="{ checkStrictly: true }"
                        clearable
                        v-model="fromValue[item.name]"
                    ></el-cascader>
                    <el-date-picker v-if="item.type === 'date'" type="date" :placeholder="item.placeholder" v-model="fromValue[item.name]"></el-date-picker>
                    <el-select v-if="item.type === 'select'" :placeholder="item.placeholder" v-model="fromValue[item.name]">
                        <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value"></el-option>
                    </el-select>
                    <el-select v-if="item.type === 'select_id'" :placeholder="item.placeholder" v-model="fromValue[item.name]">
                        <el-option v-for="i in item.options" :key="i.id" :label="i.name" :value="i.id"></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
        <div style="width: 180px; display: flex">
            <el-button icon="el-icon-search" @click="search">搜索</el-button>
            <el-button style="margin-left: 20px" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        fromValue: {
            type: Array,
            default() {
                return []
            },
        },
        formConfig: {
            type: Array,
            default() {
                return []
            },
        },
        actions: {
            type: Array,
            default() {
                return []
            },
        },
        isAdd: {
            type: Boolean,
            default() {
                return false
            },
        },
    },
    methods: {
        search() {
            this.$emit('search', this.fromValue)

        },
        addValue() {
            this.$emit('addValue')
        },
        resetForm() {
            this.$emit('resetForm')
        },
    },
}
</script>

<style lang="less" scoped>
.form_list {
    height: 40px;
    display: flex;
    flex: 1;
    .item {
        width: 14%;
        margin-right: 2%;
        height: 40px !important;
    }

    .item {
        .el-input,
        .el-select,
        .el-cascader {
            width: 100%;
        }
    }
}

.el-button {
    width: 80px;
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    display: flex;
    justify-content: center !important;
}
</style>
